<template>
  <div class="car" @click=" num ? isShow=!isShow : num ">
    <div :class="{'num':num,'null':!num}">{{ num_select }}</div>
    <div>
        <a><img src="../../../../assets/images/shopcar.jpg" alt="购物车" class="shopcar"></a>
    </div>
  </div>
  <Teleport to="body">
    <div v-show="isShow&&num">
        <List :selectNum="num_select"/>
    </div>
  </Teleport>
</template>

<script>
import { computed, onMounted, onUpdated, ref, watch } from 'vue';
import List from './ShopList/List.vue'

export default {
    name:'ShopCar',
    components:{ List },
    props:['items'],
    setup(props){

        let isShow = ref(false)
        let items = props.items
        let selectItems = computed(()=>{
            return items.filter((t)=>t.select===true)
        })

        //列表中初步选择的商品数
        let num = computed(()=>{
            let count = 0
            for(let i=0;i<items.length;i++){
                if(items[i].select){
                    count+=items[i].selectSum
                }
            }
            return count
        })
        //列表中勾选的商品数
        let num_select = computed(()=>{
            let count = 0
            for(let i=0;i<items.length;i++){
                if(items[i].select_settle){
                    count+=items[i].selectSum
                }
            }
            return count
        })

        //数目归零不展示
        watch(num,(newVal)=>{
            if(newVal===0){
                isShow.value = false
            }
        })
        return {
            num,isShow,items,selectItems,num_select
        }
    }
}
</script>

<style scoped>
    .car {
        width: 50px;
    }
    .num {
        top: 18px;
        width: 20px;
        text-align: center;
        position: relative;
        background-color: rgb(255, 67, 67);
        border-radius: 50%;
        border: 1px solid rgb(255, 255, 255);
        color: white;
    }
    .null {
        width: 20px;
        text-align: center;
        position: relative;
        top: 18px;
        background-color: grey;
        border-radius: 50%;
        border: 1px solid rgb(255, 255, 255);
        color: white;
    }
    .shopcar {
        width: 100%;
        height: auto;
        border-radius: 50%;
    }
</style>